<template>
  <div ref="chart" class="charts chart-pie"></div>
</template>
<script>
export default {
  name: 'halfcircle',
  props: {
    chartList: {
      type: Array
    },
    total: {
      type: Number
    }
  },
  watch: {
    chartList(newVal) {
      this.chartList = newVal
      this.getEchartData()
    },
    total(newVal) {
      this.total = newVal
      this.getEchartData()
    }
  },
  data() {
    return {
      datas: [],
      numTotal: 10
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.getEchartData()
    })
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart
      this.datas = this.chartList
      const colors = ['#E28556', '#E2AB56', '#3B71DA', '#3CBDD0']
      const objData = this.array2obj(this.chartList, 'name')
      if (this.total === 0) {
        this.numTotal = 10
      } else {
        this.numTotal = this.total
      }
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          tooltip: {
            show: false
          },
          color: ['#E28556', '#E2AB56', '#3B71DA', '#3CBDD0'],
          legend: {
            orient: 'vertical',
            icon: 'circle',
            itemWidth: 10,
            itemHeight: 10,
            top: 'center',
            left: '65%',
            itemGap: 5,
            data: this.datas,
            formatter: function (name) {
              return `{name|${name}}{value|${objData[name].value}}`
            },
            textStyle: {
              rich: {
                name: {
                  color: 'rgb(127, 127, 127)',
                  fontSize: 12,
                  width: 40
                },
                value: {
                  color: '#000',
                  fontSize: 16,
                  fontWeight: 500,
                  padding: [0, 0, 0, 10]
                }
              }
            }
          },
          series: [
            {
              name: this.chartList[0].name,
              type: 'pie',
              startAngle: 0,
              hoverAnimation: false,
              tooltip: {},
              radius: ['25%', '15%'],
              center: ['30%', '70%'],
              label: {
                normal: {
                  show: false,
                  position: 'center',
                  color: '#fff',
                  formatter: function (params) {
                    return params.value
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: this.numTotal,
                  itemStyle: {
                    normal: {
                      color: 'rgba(80,150,224,0)'
                    }
                  }
                },
                {
                  value: this.chartList[0].value,
                  itemStyle: {
                    normal: {
                      shadowColor: 'rgba(0, 0, 0, .3)',
                      shadowBlur: 3,
                      shadowOffsetY: 3,
                      shadowOffsetX: 0,
                      color: colors[0]
                    }
                  }
                },
                {
                  value: Number(parseInt(this.numTotal) - this.chartList[0].value),
                  itemStyle: {
                    normal: {
                      color: 'rgba(80,150,224,0.1)'
                    }
                  }
                }
              ]
            },
            {
              name: this.chartList[1].name,
              type: 'pie',
              startAngle: 0,
              radius: ['50%', '40%'],
              center: ['30%', '70%'],
              legendHoverLink: false,
              hoverAnimation: false,
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: this.numTotal,
                  itemStyle: {
                    normal: {
                      color: 'rgba(35,206,167,0)'
                    }
                  }
                },
                {
                  value: this.chartList[1].value,
                  itemStyle: {
                    normal: {
                      shadowColor: 'rgba(0, 0, 0, .3)',
                      shadowBlur: 10,
                      shadowOffsetY: 3,
                      shadowOffsetX: 0,
                      color: colors[1]
                    }
                  }
                },
                {
                  value: Number(parseInt(this.numTotal) - this.chartList[1].value),
                  itemStyle: {
                    normal: {
                      color: 'rgba(35,206,167,0.1)'
                    }
                  }
                }
              ]
            },
            {
              name: this.chartList[2].name,
              type: 'pie',
              startAngle: 0,
              hoverAnimation: false,
              radius: ['75%', '70%'],
              center: ['30%', '70%'],
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: this.numTotal,
                  itemStyle: {
                    normal: {
                      color: 'rgba(1,218,220,0)'
                    }
                  }
                },
                {
                  value: this.chartList[2].value,
                  itemStyle: {
                    normal: {
                      shadowColor: 'rgba(0, 0, 0, .3)',
                      shadowBlur: 10,
                      shadowOffsetY: 3,
                      shadowOffsetX: 0,
                      color: colors[2]
                      // color: new echarts.graphic.RadialGradient(0.4, 0.3, 1, [{
                      //     offset: 0,
                      //     color: 'rgb(129, 227, 238)'
                      // }, {
                      //     offset: 1,
                      //     color: 'rgb(25, 183, 207)'
                      // }])
                    }
                  }
                },
                {
                  value: Number(parseInt(this.numTotal) - this.chartList[2].value),
                  itemStyle: {
                    normal: {
                      color: 'rgba(1,218,220,0.1)'
                    }
                  }
                }
              ]
            },
            {
              name: this.chartList[3].name,
              type: 'pie',
              startAngle: 0,
              hoverAnimation: false,
              radius: ['97%', '90%'],
              center: ['30%', '70%'],
              label: {
                normal: {
                  show: false,
                  position: 'center'
                },
                emphasis: {
                  show: true,
                  textStyle: {
                    fontSize: '10',
                    fontWeight: 'bold'
                  }
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              data: [
                {
                  value: this.numTotal,
                  itemStyle: {
                    normal: {
                      color: 'rgba(1,218,220,0)'
                    }
                  }
                },
                {
                  value: this.chartList[3].value,
                  itemStyle: {
                    normal: {
                      shadowColor: 'rgba(0, 0, 0, .3)',
                      shadowBlur: 10,
                      shadowOffsetY: 3,
                      shadowOffsetX: 0,
                      color: colors[3]
                    }
                  }
                },
                {
                  value: Number(parseInt(this.numTotal) - this.chartList[3].value),
                  itemStyle: {
                    normal: {
                      color: 'rgba(1,218,220,0.1)'
                    }
                  }
                }
              ]
            }
          ]
        }
        myChart.setOption(option)
        window.addEventListener('resize', function () {
          myChart.resize()
        })
      }
    },
    array2obj(array, key) {
      var resObj = {}
      for (var i = 0; i < array.length; i++) {
        resObj[array[i][key]] = array[i]
      }
      return resObj
    }
  }
}
</script>

<style scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>
